<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.parent{
				height: 300px;
				/* 6.设置左右边距,由于左右宽度值一样，所以这个写法可以用margin: 0 30%;替换。*/
				margin-left: 300px;
				margin-right: 300px;
				
			}
			.parent .left,
			.parent .center,
			.parent .right{
				height: 300px;
				/* 4.全部设置浮动 */
				float: left;
			}
			.parent .left{ /* 定宽*/
				width: 300px;
				background: #00FFFF;
				/* 7.从当前行移动到上一行同一个位置 */
				margin-left: -100%;
				/* 8.将当前元素移动到理想位置 */
				position: relative;
				left: -300px;
			}
			.parent .center{/* 自适应*/
				background: red;
				/* 5.设置一个100%的宽度值 */
				width: 100%;
				
			}
			.parent .right{/* 定宽*/
				width: 300px; 
				background: forestgreen;
				/* 9.从当前行移动到上一行同一个位置 */
				margin-left: -300px;
				/* 10.将当前元素移动到理想位置 */
				position: relative;
				right: -300px;
				
			}
			/* 13.为第一行和第三行设置样式 */
			.one,.three{
				width: 100%;
				height: 150px;
				background: #FFE4C4;
				text-align: center;
			}
			
			/* 
				存在副作用
			 */
		</style>
	</head>
	<body>
		<!-- 11.定义第一行 -->
		<div class="one">第一行</div>
		<!-- 1.定义第一行父级元素 -->
		<div class="parent">
			<!-- 3.调整中间元素的排列位置(不利于搜索引擎seo中间部分) -->
			<div class="center">中间部分</div>
			<!-- 2.定义子级元素 -->
			<div class="left">左侧：定宽</div>
			<div class="right">右侧：自适应</div>
		</div>
		<!-- 12.定义第三行 -->
		<div class="three">第三行</div>
	</body>
</html>
